<template>
    <box title="告警类型" class="">
      <!-- 日期选择 -->
      <template #title-right>
        <div class="flex cursor-pointer">
          <div v-for="(item, index) in List" :key="index" class="text-[#ffffff] w-[26px] h-[26px]
                     "
               :class="selectTime == index ?  getDataImg('selectTime') :getDataImg('defaultSelectTime')"
               @click="changeList(item, index)">
            <div class="text-center leading-[26px]">
              {{ isNullOrEmpty( item?.name ) }}
            </div>
  
          </div>
        </div>
      </template>
      <div class="p-[16px] h-[220px]"><!-- :style="{ height: hightdata + 'px' }"-->
        <pie :data="piedata" :withorhight="80"/>
       </div>
        
    </box>
  </template>
  <script lang="ts" setup>
   import { getDataImg } from "@/utils/data-themset"
import { isNullOrEmpty } from '@/utils/functions'
  import {supervisealarmtype} from '@/api/screen/largeData'
  import box from '@/views/large-data-screen/component/box.vue'
  import pie from '@/views/large-data-screen/component/echarts/pie.vue'
  const selectTime = ref(0) //选择项目，家庭
  const piedata = ref([])
  const alarmDT = ref(3)
  const List = ref([
   { name: '月', id: 3 },
    { name: '年', id: 4 },
  ])
  onMounted(() => {
    getscreeninspect()
  })
  
    //点击
const changeList = (item, index) => {
  selectTime.value = index
  alarmDT.value = item.id
  getscreeninspect()
}
  //获取设备统计
  const getscreeninspect = () => {
    supervisealarmtype({
      alarmDT:alarmDT.value
  }).then(res => {
  console.log("告警类型",res);
  
      piedata.value = res.result.alarmType
  
  
    })
  }
  </script>
  